<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>主页 - Mubea</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<link rel="shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="../source/css/base.css" rel="stylesheet" type="text/css" />
<link href="../source/css/element-ui@2.4.0.index.css?180712" rel="stylesheet" type="text/css" />
<link href="../source/css/main.css" rel="stylesheet" type="text/css" />

</head>
    <div id="app" class="main">
        <div class="header cf">
            <div class="header-wrap">
                <a href="./main.html?type=1">
                    <img class="logo" src="../source/img/logo.png" alt="" />
                </a>

                <el-dropdown class="fr" v-if="username" v-cloak @command="handleCommand">
                    <span class="el-dropdown-link">
                    {{username}} <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">修改密码</el-dropdown-item>
                        <el-dropdown-item command="2">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>


        <div class="bd">
            <!--左侧菜单栏-->
            <div class="nav-box">
                <div class="nav-menu" v-cloak>
                    <el-menu
                            :default-active="defaultActive"
                            class="el-menu-vertical-demo"
                            @open="menuOpen"
                            @close="menuClose"
                            @select="changeMenu"
                            theme="dark">

                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-setting"></i><span>功能菜单</span>
                            </template>
                            <el-menu-item :index="'1-'+(index+1)" v-for="(menu,index) in menuData" :key="index">
                                {{menu}}
                            </el-menu-item>
                            <!--<el-menu-item index="1-1">
                                <a href="./main.html">Plant</a>
                            </el-menu-item>-->
                            <!--<el-menu-item index="1-2">
                                <a href="./main.html">MRP Controller</a>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <a href="./main.html">Purchasing Group</a>
                            </el-menu-item>
                            <el-menu-item index="1-4">
                                <a href="./main.html">Order Unit</a>
                            </el-menu-item>
                            <el-menu-item index="1-5">
                                <a href="./main.html">Material</a>
                            </el-menu-item>
                            <el-menu-item index="1-6">
                                <a href="./main.html">Vendor</a>
                            </el-menu-item>
                            <el-menu-item index="1-7">
                                <a href="./main.html">Base Unit of Measure</a>
                            </el-menu-item>
                            <el-menu-item index="1-8">
                                <a href="./userlist.html">用户管理</a>
                            </el-menu-item>-->
                        </el-submenu>

                    </el-menu>
                </div>
            </div>

            <!--右侧内容-->
            <div class="cont-box">
                <div class="cont-wrap">
                    <div class="cont-hd" v-cloak>
                        <el-form ref="searchForm" class="search-form" :inline="true" label-position="left" :model="searchForm" label-width="auto">
                            <el-form-item label="代码">
                                <el-input v-model="searchForm.number"  placeholder="代码"></el-input>
                            </el-form-item>
                            <el-form-item label="名称" style="margin-left:20px;">
                                <el-input v-model="searchForm.name"  placeholder="名称"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="onSearch" style="margin-top:-4px;margin-left:20px;">查询</el-button>
                                <el-button type="success" icon="el-icon-plus" @click="showAddRowPop" style="margin-top:-4px;margin-left:30px;">新增</el-button>
                            </el-form-item>

                        </el-form>


                        <!--<el-button type="primary" @click="updateRow">修改</el-button>-->
                    </div>
                    <div class="cont-bd" v-loading="loading" element-loading-text="加载中..." v-cloak>
                        <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                @selection-change="selectionRow">
                            <!--<el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>-->
                            <el-table-column
                                    prop="Number"
                                    label="代码">
                            </el-table-column>
                            <el-table-column
                                    prop="Name"
                                    label="名称">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="100">
                                <template slot-scope="scope">
                                   <!-- <el-switch
                                        v-model="scope.row.isAble" @change="apiDisableRow(scope.row)">
                                    </el-switch>-->
                                    <a href="javascript:;" @click="apiDisableRow(scope.row,scope.$index)">{{scope.row.isAble === 1 ? '禁用' : '启用'}}</a>
                                    <a class="update-btn" href="javascript:;" @click="showUpdatePop(scope.row,scope.$index)">修改</a>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pages tr" v-if="pageTotal > pageInfo.pagecount">
                            <el-pagination
                                background
                                @current-change="currentChange"
                                layout="prev, pager, next, jumper, ->"
                                :current-page="formData1.pageindex"
                                :page-size="pageInfo.pagecount"
                                :total="pageTotal">
                            </el-pagination>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- 普通页面的新增和修改的内容-->
        <el-dialog
            :title="dialog.title"
            :visible.sync="dialog.visible"
            :close-on-click-modal="false"
            width="30%"
            :before-close="dialogClose">

            <el-form ref="dialogForm1" :model="formData1" :rules="formrules1" label-width="62px">
                <el-form-item label="代码" prop="number">
                    <el-input v-model="formData1.number" v-if="dialog.type==1" placeholder="请输入代码"></el-input>
                    <el-input v-model="formData1.number" v-else disabled placeholder="请输入代码"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="formData1.name"  placeholder="请输入名称"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClose">取 消</el-button>
                <el-button type="primary" @click="sure()">确 定</el-button>
            </span>
        </el-dialog>
    </div>



<script src="../source/js/lib/vue.min.js"></script>
<script src="../source/js/lib/element-ui@2.4.0.index.js"></script>
<script src="../source/js/lib/jquery.min.js"></script>
<script src="../source/js/common.js?0622"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            testData:"1",
            menuData:['Plant','MRP Controller','Purchasing Group','Order Unit','Material','Vendor','Base Unit of Measure','用户管理'],
            defaultActive:-1,
            loading:false,
            dialog:{
                visible:false,
                type:'',  //1新增  2修改
                title:'',
            },
            searchForm:{ //搜索查询对应的表单
                "number":"",
                "name":"",
                "type":getQueryString('type'),
                "pageindex":1,
                "pagecount":pageInfo.pagecount,
                "username":decodeURIComponent(getCookie('username')),
                "pwd":"",
                "account":user.account,
            },
            formData1:{ // 修改新增表单数据
                "number":"",
                "name":"",
                "type":"",
                "pageindex":1,
                "pagecount":pageInfo.pagecount,
                "username":decodeURIComponent(getCookie('username')),
                "pwd":"",
                "account":user.account,
            },
            formrules1: {
                number: [
                    { required: true, message: '请输入代码', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ]
            },
            tableData: [],
            selectionRows:[], //选中的行
            pagecount:pageInfo.pagecount,
            pageTotal:1,
            updateIndex:-1, //修改行的索引
            username:decodeURIComponent(getCookie('username'))
        },
        methods: {
            menuOpen:function(key, keyPath) {
                // console.log(key, keyPath);
            },
            menuClose:function(key, keyPath) {
                // console.log(key, keyPath);
            },
            changeMenu:function(index){
                var type = index.split('-')[1];
                if(type == 8){
                    location.href = './userlist.html?180719';
                }else{
                    location.href = './main.html?type='+type;
                }
            },
            apiGetRows:function(type){
                var _this = this;
                var data = {};
                if(type == 'search') {
                    data = _this.searchForm;
                }else{
                    data = _this.formData1;
                }
                data.time = new Date().getTime();

                $.ajax({
                    url:apiUrl+'/ItemQuery',
                    type:'GET',
                    data:{'json':JSON.stringify(data)},
                    cache:false,
                    //dataType :'jsonp',
                    success:function(datas){
                        console.log('datas',datas)
                        if(datas.Success===true){
                            _this.tableData = datas.ItemList;
                            _this.pageTotal = datas.Count;
                        }else{
                            _this.$message.error(datas.Msg);
                        }
                    },
                    error:function(datas){
                        _this.$message.error(datas.Msg);
                    },
                    complete:function(){
                        _this.loading = false;
                    }
                });
            },
            apiAddRow:function(){
                var _this = this;
                _this.formData1.time = new Date().getTime();
                _this.$nextTick(function(){
                    $.ajax({
                        url:apiUrl+'/ItemNew',
                        type:'POST',
                        data:{'json':JSON.stringify(_this.formData1)},
                        cache:false,
                        //dataType :'jsonp',
                        success:function(datas){
                            console.log('datas',datas)
                            if(datas.Success===true){
                                _this.$message.success('恭喜！新增成功');
                                _this.formData1.pageindex = 1;
                                _this.$nextTick(function(){
                                    _this.dialogClose();
                                    _this.apiGetRows();
                                });
                            }else{
                                _this.$message.error(datas.Msg);
                            }
                        },
                        error:function(datas){
                            _this.$message.error(datas.Msg);
                        }
                    });
                })
            },
            apiUpdateRow:function(index){
                var _this = this;
                _this.formData1.time = new Date().getTime();

                _this.$nextTick(function(){
                    $.ajax({
                        url:apiUrl+'/ItemUpdate',
                        type:'POST',
                        data:{'json':JSON.stringify(_this.formData1)},
                        cache:false,
                        //dataType :'jsonp',
                        success:function(datas){
                            if(datas.Success===true){
                                _this.$message.success('恭喜！修改成功');
                                _this.tableData[_this.updateIndex].Number = _this.formData1.number;
                                _this.tableData[_this.updateIndex].Name = _this.formData1.name;

                                _this.$nextTick(function(){
                                    _this.dialogClose();
                                })
                            }else{
                                _this.$message.error(datas.Msg);
                            }
                        },
                        error:function(datas){
                            _this.$message.error(datas.Msg);
                        }
                    });
                })
            },
            apiDisableRow:function(rowData,index){
                var url = apiUrl;
                var _this = this;

                if(rowData.isAble){ // 去禁用
                    url = apiUrl+'/ItemDisable';
                }else{ //去开启
                    url = apiUrl+'/Itemable'
                }
                _this.formData1.number = rowData.Number;
                _this.formData1.name = rowData.Name;
				_this.formData1.time = new Date().getTime();
				
                this.$nextTick(function(){
                    $.ajax({
                        url:url,
                        type:'GET',
                        data:{'json':JSON.stringify(_this.formData1)},
                        cache:false,
                        // beforeSend :function(xmlHttp){
                        //     xmlHttp.setRequestHeader("If-Modified-Since","0");
                        //     xmlHttp.setRequestHeader("Cache-Control","no-cache");
                        // },
                        //dataType :'jsonp',
                        success:function(datas){
                            console.log('datas',datas)
                            if(datas.Success===true){
                                if(rowData.isAble === 1){ // 禁用成功
                                    _this.$message.success('禁用成功');
                                    _this.tableData[index].isAble = 0;
                                }else{
                                    _this.$message.success('开启成功');
                                    _this.tableData[index].isAble = 1;
                                }

                            }else{
                                _this.$message.error(datas.Msg);
                            }
                        },
                        error:function(datas){
                            _this.$message.error(datas.Msg);
                        },
                        complete:function(){
                            _this.formData1.number = "";
                            _this.formData1.name = "";
                        }
                    });
                })
            },
            onSearch:function(){
                this.apiGetRows('search')
            },
            sure:function(){
                var _this = this;
                this.$refs['dialogForm1'].validate(function(valid){
                    console.log('valid',valid)
                    if (valid) {
                        (_this.dialog.type == 1) &&  _this.apiAddRow();
                        (_this.dialog.type == 2) &&  _this.apiUpdateRow();
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });
            },
            showAddRowPop:function(){
                this.dialog.visible =true;
                this.dialog.type = 1 ;
                this.dialog.title = '新增';
            },
            showUpdatePop:function(rowData,index){
                this.dialog.visible =true;
                this.dialog.type = 2 ;
                this.dialog.title = '修改';

                this.updateIndex = index;
                // 带参
                this.formData1.number = rowData.Number;
                this.formData1.name = rowData.Name;
            },
            selectionRow:function(selection){
                // console.log(selection)
                this.selectionRows = selection;
            },
            currentChange:function(cur){
                var _this = this;
                this.formData1.pageindex = cur;
                this.$nextTick(function(){
                    _this.apiGetRows();
                })
            },
            dialogClose:function(){ //关闭弹窗
                this.dialog = {
                    visible:false,
                    type:'',  //1新增  2修改
                    title:'',
                }

                this.formData1.number = '';
                this.formData1.name = '';
                this.formData1.pageindex = 1;

                this.$refs['dialogForm1'].resetFields();
            },
            isLogin:function(){
                var username = getCookie('username');
                if(username && username != 'undefined'){
                    return true;
                }
                return false;
            },
            loginout:function(){
                removeCookie('username');
                removeCookie('type');
                location.href='./login.html';
            },
            handleCommand:function(command){
                if(command == 1){
                    location.href='./update_pwd.html';
                }else if(command == 2){
                    this.loginout()
                }
            }
        },
        created:function(){
            var _this = this;
            var type = getQueryString('type');

            if(type){
                this.defaultActive = '1-'+type;
                if(type == 8){
                    location.href = './userlist.html?180719';
                }else{
                    this.formData1.type = type;
                    this.$nextTick(function(){
                        _this.loading = true;
                        _this.apiGetRows();
                    })
                }
            }


            if(!this.isLogin()){ //登录
                location.href = './login.html';
            }
        }
    })
</script>
</body>
</html>